<template>
	<transition name="fade">
		<div class="slide-content-wrapper" v-show="menuVisible && settingVisible === 3">
			<transition name="slide-right">
				<!-- 左侧目录区域 -->
				<div class="content" v-if="settingVisible === 3">
					<div class="content-page-wapper" v-if="bookAvailable">
						<!-- 上面目录区域 --> 
						<div class="content-page">
							<component :is="currentTab === 1 ? content : bookmark"></component>
						</div>
						<!-- 下方按钮区域 -->
						<div class="content-page-tab">
							<!-- 目录标签 --> 
							<div class="content-page-tab-item" :class="{'selected': currentTab === 1}" @click="selectTab(1)">{{$t('book.navigation')}}</div>
							<!-- 书签标签 -->
							<div class="content-page-tab-item" :class="{'selected': currentTab === 2}" @click="selectTab(2)">{{$t('book.bookmark')}}</div>
						</div>
					</div>
					<div class="content-empty" v-else>
						<ebook-loading></ebook-loading>
					</div>
				</div>
			</transition>
			<!-- 右侧背景区域 -->
			<div class="content-bg" @click="hideTitleAndMenu()"></div>
		</div>
	</transition>
</template>

<script>
import { ebookMixin } from '../../utils/mixin'
import EbookSlideContents from './EbookSlideContents'
// 导入书签组件
import EbookSlideBookmark from './EbookSlideBookmark'
// 导入翻页动画组件
import EbookLoading from './EbookLoading'

export default {
	mixins: [ebookMixin],
	components: {
		EbookLoading
	},
	data() {
		return {
			currentTab: 1,
			content: EbookSlideContents,
			bookmark: EbookSlideBookmark
		}
	},
	methods: {
		selectTab(tab) {
			this.currentTab = tab
		}
	}
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	// $ratio: 375 / 10;

	// @function px2rem($px) {
  //   @return $px / $ratio + rem;
	// }

	// @mixin center {
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }

	// @mixin left {
	// 	display: flex;
	// 	justify-content: flex-start;
	// 	align-items: center;
	// }

	// @mixin right {
	// 	display: flex;
	// 	justify-content: flex-end;
	// 	align-items: center;
	// }

	// @mixin ellipse {
	// 	text-overflow: ellipsis;
	// 	overflow: hidden;
	// 	white-space: nowrap;
	// }
	@import "../../assets/styles/global.scss";

	.slide-content-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 300;
		display: flex;
		width: 100%;
		height: 100%;
		.content {
			flex: 0 0 85%;
			width: 85%;
			height: 100%;
			.content-page-wapper {
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;
				.content-page {
					flex: 1;
					width: 100%;
					overflow: hidden;
				}
				.content-page-tab {
					display: flex;
					flex: 0, 0, px2rem(48);
					width: 100%;
					height: px2rem(48);
					.content-page-tab-item {
						flex: 1; 
						font-size: px2rem(12);
						@include center;
					}
				}
			}
			.content-empty {
				width: 100%;
				height: 100%;
				@include center;
			}
		}
		.content-bg {
			flex: 0 0 15%;
			width: 15%;
			height: 100%;
		}
	}

	// 过渡动画
	.slide-right-enter-active, .slide-right-leave-active, .fade-slide-right-enter-active, .fade-slide-right-leave-active {
	  transition: all .3s linear;
	}

	.slide-right-enter, .slide-right-leave-to {
	  transform: translate3d(-100%, 0, 0);
	}

	.fade-slide-right-enter, .fade-slide-right-leave-to {
		transform: translate3d(-100%, 0, 0);  //动画的起始位置
		opacity: 0;
	}

	.fade-slide-right-enter-to, .fade-slide-right-leave {
		transform: translate3d(0, 0, 0);  //动画的结束位置
		opacity: 1;
	}
</style>
